import React, {Component} from 'react'
import {View, Text, ScrollView, TouchableOpacity, TextInput, Switch} from 'react-native'
import styles from '../../config/styles'
import Icon from 'react-native-vector-icons/Ionicons'

class AddTextBook extends Component {
    static navigationOptions = ({ navigation }) => {
        const params = navigation.state.params
        if (params != undefined) {
            const _headerRight = (<TouchableOpacity
                                        style={{paddingRight: 5}}
                                        onPress={params.submit}
                                    >
                                        <Text style={[styles.header_font]}>
                                            提交
                                        </Text>   
                                    </TouchableOpacity>
                                )
            return {
                headerRight: _headerRight
            }
        }
    } 

    constructor (props) {
        super(props)
        const {params} = props.navigation.state
        const task = params.task || {}
        this.state = {
            task: task,
            onComplete: params.onComplete,
            bookName: task.bookName || '',
            chapterName: task.chapterName || '',
            sectionName: task.sectionName || '',
            need_score: task.need_score || false,
            need_recite: task.need_recite || false
        }
    }

    componentDidMount() {
        this.props.navigation.setParams({
            submit: () => {
                const {task, bookName, chapterName, sectionName, need_score, need_recite, onComplete} = this.state
                task.bookName = bookName
                task.chapterName = chapterName
                task.sectionName = sectionName
                task.need_score = need_score
                task.need_recite = need_recite
                if (task.section_id == undefined) {
                    Toast.show('请选择课文')
                    return
                }
                onComplete(task)
                this.props.navigation.goBack()
            }
        })
    }

    //选择课本
    selectBook = () => {
        const {navigation} = this.props
        const onComplete = (book) => {
            const {task} = this.state
            task.textbook_id = book.id
            task.unit_id = book.first_unit_id
            task.chapter_id = null
            task.section_id = null
            this.setState({task: task, bookName: book.name, chapterName: '', sectionName: ''})
        }
        navigation.navigate('book_selector', {onComplete: onComplete, grade_id: navigation.state.params.grade_id})
    }

    //选择单元
    selectUnit = () => {
        if (this.state.task.textbook_id == undefined) {
            Toast.show('请先选择课本')
            return
        }
        const {navigation} = this.props
        const onComplete = (chapter) => {
            const {task} = this.state
            task.chapter_id = chapter.id
            task.section_id = null
            this.setState({task: task, chapterName: chapter.name, sectionName: ''})
        }
        navigation.navigate('unit_selector', {onComplete: onComplete, book_id: this.state.task.unit_id})
    }

    //选择课文
    selectSection = () => {
        if (this.state.task.chapter_id == undefined) {
            Toast.show('请先选择单元')
            return
        }
        const {navigation} = this.props
        const onComplete = (section) => {
            const {task} = this.state
            task.section_id = section.id
            this.setState({task: task, sectionName: section.name})
        }
        navigation.navigate('section_selector', {onComplete: onComplete, chapter_id: this.state.task.chapter_id})
    }

    //设置课文
    setContent = (txt) => {
        let _task = this.state.task
        _task.content = txt
        this.setState({task: _task})
    }

    render () {
        const {task, bookName, chapterName, sectionName, need_score, need_recite} = this.state
        return(
            <ScrollView>
                <View style={styles.view_module_container}>
                    <TouchableOpacity 
                        style={[styles.text_content_container, {flexDirection: 'row',justifyContent: 'flex-start', alignItems: 'center'}]}
                        onPress={this.selectBook}
                    >
                        <Text style={[styles.text_black, {flex: 1}]}>
                            选择课本:
                        </Text>
                        <Text style={[styles.text_black, {paddingRight: 3}]}>
                            {bookName}
                        </Text>
                        <Icon name={'ios-arrow-forward'} size={18} color={'#707070'} />
                    </TouchableOpacity>

                    <TouchableOpacity
                        style={[styles.text_content_container, {flexDirection: 'row',justifyContent: 'flex-start', alignItems: 'center'}]}
                        onPress={this.selectUnit}
                    >
                        <Text style={[styles.text_black, {flex: 1}]}>
                            选择单元:
                        </Text>
                        <Text style={[styles.text_black, {paddingRight: 3}]}>
                            {chapterName}
                        </Text>
                        <Icon name={'ios-arrow-forward'} size={18} color={'#707070'} />
                    </TouchableOpacity>

                    <TouchableOpacity
                        style={[styles.text_content_container, {flexDirection: 'row',justifyContent: 'flex-start', alignItems: 'center'}]}
                        onPress={this.selectSection}
                    >
                        <Text style={[styles.text_black, {flex: 1}]}>
                            选择课文:
                        </Text>
                        <Text style={[styles.text_black, {paddingRight: 3}]}>
                            {sectionName}
                        </Text>
                        <Icon name={'ios-arrow-forward'} size={18} color={'#707070'} />
                    </TouchableOpacity>

                    <View style={{flex: 1, height: 150, padding: 10}}>
                        <TextInput 
                            style={[styles.background_light_grey_plus, {padding: 0, flex: 1}]}
                            placeholder={'请输入提醒文字(非必填)'}
                            onChangeText={this.setContent} 
                            value={task.content}
                            multiline={true}
                            textAlignVertical={'top'}
                        />
                    </View>

                    <View style={[styles.text_content_container,{flexDirection: 'row',justifyContent: 'flex-start', alignItems: 'center'}]}>
                        <Text style={[styles.text_black, {flex: 1}]}>
                            是否需要评分:
                        </Text>
                        <Switch 
                            value={need_score}
                            onValueChange={() => this.setState({need_score: !need_score})}
                        />
                    </View>

                    <View style={[styles.text_content_container,{flexDirection: 'row',justifyContent: 'flex-start', alignItems: 'center'}]}>
                        <Text style={[styles.text_black, {flex: 1}]}>
                            是否需要背诵:
                        </Text>
                        <Switch 
                            value={need_recite}
                            onValueChange={() => this.setState({need_recite: !need_recite})}
                        />
                    </View>
                </View>    
            </ScrollView>
        )
    }
}

export default AddTextBook